<template>
  <div class="all">
    <div class="friends">
      <add-friends @success="getFrients"></add-friends>
      <div
        v-for="(item, index) in friends"
        :key="item.id"
        @click="openSession(index, item)"
        class="friend-list"
        v-bind:class="{ active: index == activeindex }"
      >
        <friends-list :user="item"></friends-list>
      </div>
    </div>
    <div class="session">
      <friends-info
        :friend="now_session"
        v-if="displayInfo"
        @openMessage="openMessage"
        @reload="init"
      ></friends-info>
      <message v-if="!displayInfo" :friends="now_session"></message>
    </div>
  </div>
</template>

<script>
import AddFriends from "../components/friends/AddFriends.vue";
import FriendsList from "../components/friends/FriendsList.vue";
import { mapState } from "vuex";
import FriendsInfo from "./FriendsInfo.vue";
import Message from "./Message.vue";
export default {
  components: { AddFriends, FriendsList, FriendsInfo, Message },
  data() {
    return {
      activeindex: null,
      friends: null,
      now_session: null,
      displayInfo: true,
    };
  },
  created() {
    this.getFrients();
    // this.ws = new WebSocket(
    //   `${process.env.VUE_APP_WEBSOCKET_HOST}/${this.userId}`
    // );
  },
  computed: {
    ...mapState(["userId","ws"]),
  },
  methods: {
    getFrients() {
      this.$https.get(`/friends/search/${this.userId}`).then((d) => {
        if (d.code == 200) {
          this.friends = d.data;
        }
      });
    },
    openSession(index, item) {
      this.activeindex = index;
      this.displayInfo = true;
      this.now_session = item;
    },
    openMessage(user) {
      this.now_session = user;
      this.displayInfo = false;
    },
    init() {
      this.friends = null;
      this.now_session = null;
      this.displayInfo = true;
      this.getFrients();
    },
  },

  mounted() {},
  beforeDestroy() {
    // this.ws.close();
  },
};
</script>

<style lang="scss" scoped>
.all {
  width: 1200px;
  height: 800px;
  display: flex;
  .friends {
    width: 30%;
    text-align: center;
    background: rgb(255, 253, 253);
    border: 2px solid rgb(230, 235, 235);
    border-radius: 5px;
  }
  .session {
    margin-left: 7px;
    width: 70%;
    background: rgb(255, 253, 253);
    border: 2px solid rgb(230, 235, 235);
    border-radius: 5px;
  }
}
.friend-list {
  background-color: azure;
}
.active {
  background-color: rgb(118, 181, 218);
}
</style>>
